 <!-- RIBBON -->
<div id="ribbon">

    <!-- breadcrumb -->
    <ol class="breadcrumb">
        <li>Publicidad</li><li>${accion}</li>
    </ol>
    <!-- /breadcrumb -->

</div>
<!-- /RIBBON -->

 <!-- PUBLICIDAD -->
<div id="content">

    <!-- row -->
    <div class="row">

        <!-- col -->
        <div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
            <h1 class="page-title txt-color-blueDark">

                <!-- PAGE HEADER -->
                <i class="fa-fw fa fa-bullhorn"></i> 
                Publicidad 
                <span>>  
                    ${accion}
                </span>
            </h1>
        </div>
        <div class="col-lg-8 col-sm-5 text-right">
            <p class="txt-color-blueDark ${hiddenDatos}" style="font-size: 16px; margin-top: 16px; margin-right: 5px">
                <i class="fa fa-bar-chart-o"></i> <strong>Clicks:</strong> ${clicks} - 
                <i class="fa fa-eye"></i> <strong>Impresiones:</strong> ${impresiones} 
            </p>
        </div>
        <!-- /col -->

    </div>
    <!-- /row -->

    <!-- widget grid -->
    <section id="widget-grid" class="">

        <!-- row -->
        <div class="row">

            <!-- WIDGET PUBLICIDAD -->
            <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                <!-- Widget ID (each widget will need unique ID)-->
                <div 
                    class="jarviswidget jarviswidget-color-darken" 
                    id="" 
                    data-widget-colorbutton="false" 
                    data-widget-editbutton="false" 
                    data-widget-togglebutton="false" 
                    data-widget-deletebutton="false" 
                    data-widget-sortable="false"
                >
                    <header>
                        <span class="widget-icon"> <i class="fa fa-${icon}"></i> </span>
                        <h2>${title}</h2>				

                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget edit box -->
                        <div class="jarviswidget-editbox">
                            <!-- This area used as dropdown edit box -->

                        </div>
                        <!-- end widget edit box -->

                        <!-- widget content -->
                        <div class="widget-body">
                            
                            <form id="formPublicidad" action="php/controllers/publicidad.controller.php" method="post" class="smart-form" enctype="multipart/form-data">

                                <fieldset>

                                    <div class="row">
                                        <section class="col col-md-6 col-sm-6 col-xs-12">
                                            <label class="label">Descripción</label>
                                            <label class="input">
                                                <input autofocus="autofocus" type="text" name="descripcion" value="${descripcion}" />
                                            </label>
                                        </section>
                                            
                                        <section class="col col-md-3 col-sm-3 col-xs-12">
                                            <label class="label">Tamaño</label>
                                            <label class="select">
                                                ${tipoToSelect}<i></i>
                                            </label>
                                        </section>
                                            
                                        <section class="col col-md-3 col-sm-3 col-xs-12">
                                            <label class="label">Estado</label>
                                            <label class="select">
                                                ${estadoToSelect}<i></i>
                                            </label>
                                        </section>
                                    </div>
                                            
                                    <div class="row">
                                        <section class="col col-md-6 col-sm-6 col-xs-12">
                                            <label class="label">Banner</label>
                                            <div class="input input-file">
                                                <span class="button"><input accept="image/x-png, image/gif, image/jpeg, application/x-shockwave-flash" type="file" id="src" name="src" onchange="this.parentNode.nextSibling.value = this.value">Seleccionar</span><input type="text" value="${src}" readonly="" />
                                            </div>
                                        </section>
                                            
                                        <section class="col col-md-6 col-sm-6 col-xs-12">
                                            <label class="label">Link</label>
                                            <label class="input">
                                                <input type="text" name="url" value="${url}" />
                                            </label>
                                        </section>
                                    </div>
                                            
                                    <div class="row">
                                        <section class="col col-md-8 col-sm-8">
                                            <label class="label">Elija las categorías en donde la publicidad va a visualizarse</label>
                                            <div class="row">
                                                ${categoriaToCheckbox}
                                            </div>
                                        </section>
                                        <section class="col col-md-4 md-4">
                                            ${preview}
                                        </section>
                                    </div>
                                            
                                </fieldset>
                                <input type="hidden" name="redirect" value="1" />
                                <input type="hidden" name="id" value="${id}" />
                            </form>
                            
                            <div class="widget-footer smart-form">
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-success saveForm" type="submit">
                                        Guardar
                                    </button>	
                                </div>
                            </div>

                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- /widget div -->

                </div>
                <!-- /widget -->

            </article>
            <!-- /WIDGET PUBLICIDAD -->
            

            <!-- col -->
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <h1 class="page-title txt-color-blueDark">
                    <span>Elija las publicaciones en donde la publicidad va a visualizarse</span>
                </h1>
            </div>
            <!-- /col -->
            
            <!-- WIDGET PUBLICACIONES SELECTED -->
            <article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

                <!-- Widget ID (each widget will need unique ID)-->
                <div 
                    class="jarviswidget jarviswidget-color-darken" 
                    id="" 
                    data-widget-colorbutton="false" 
                    data-widget-editbutton="false" 
                    data-widget-togglebutton="false" 
                    data-widget-deletebutton="false" 
                    data-widget-sortable="false"
                >
                    <header>
                        <span class="widget-icon"> <i class="fa fa-eye"></i> </span>
                        <h2>Mostrar en:</h2>				
                        <span id="dt-loader" class="jarviswidget-loader" style="display: none;"><i class="fa fa-refresh fa-spin"></i></span>
                    </header>

                    <!-- widget div-->
                    <div role="content">

                        <!-- widget content -->
                        <div class="widget-body no-padding">
                            <table id="publicacionesSelected" class="table table-striped table-bordered table-hover" width="100%">
                                <thead>
                                    <tr>
                                        <th><i class="fa fa-times"></i></th>
                                        <th>Título</th>
                                        <th>Categoría</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    ${publicaciones}
                                </tbody>
                            </table>
                        </div>
                        <!-- /widget content -->

                    </div>
                    <!-- /widget div -->

                </div>
                <!-- /widget -->

            </article>
            <!-- /WIDGET PUBLICACIONES SELECTED -->
                        
            <!-- WIDGET PUBLICACIONES -->
            <article class="col-xs-12 col-sm-12 col-md-6 col-lg-6">

                <!-- Widget ID (each widget will need unique ID)-->
                <div 
                    class="jarviswidget jarviswidget-color-darken" 
                    id="" 
                    data-widget-colorbutton="false" 
                    data-widget-editbutton="false" 
                    data-widget-togglebutton="false" 
                    data-widget-deletebutton="false" 
                    data-widget-sortable="false"
                >
                    <header>
                        <span class="widget-icon"> <i class="fa fa-list"></i> </span>
                        <h2>Listado de publicaciones</h2>				
                        <span id="dt-loader" class="jarviswidget-loader" style="display: none;"><i class="fa fa-refresh fa-spin"></i></span>
                    </header>

                    <!-- widget div-->
                    <div role="content">

                        <!-- widget content -->
                        <div class="widget-body no-padding">
                            <table id="publicaciones" class="table table-striped table-bordered table-hover" width="100%">
                                <thead>
                                    <tr>
                                        <th><i class="fa fa-plus"></i></th>
                                        <th>Título</th>
                                        <th>Categoría</th>
                                        <th>Estado</th>
                                    </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>
                        <!-- /widget content -->

                    </div>
                    <!-- /widget div -->

                </div>
                <!-- /widget -->

            </article>
            <!-- /WIDGET PUBLICACIONES -->
            
        </div>

        <!-- /row -->

    </section>
    <!-- /widget grid -->

</div>
<!-- /PUBLICIDAD -->

<script>
    var publicacionesSelected = ${publicacionesSelected}
</script>